<template>
  <header>
    <ul class="ul">
        <li
        v-for="item in tableData" 
        :key="item.id" 
        :class="item.id == modelValue?.id ? 'active' : ''"
        @click="$emit('update:modelValue',item)"
        >{{item.name}}</li>
    </ul>
  </header>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
        },
        modelValue: {
            type: Object
        }
    },
}
</script>

<style scoped>
    .ul {
        display: flex;
    }

    .ul>li {
        width: 100px;
    }

    .ul>.active {
        color: #f00;
    }
</style>